<template>
	<view class="page">
		<view class="top_search">
			<uni-easyinput prefixIcon="search" confirmType="search" @clear="clear" primaryColor="#8615E1" :inputBorder="false" v-model="keywords" placeholder="搜索您想要的商品" @confirm="search" @iconClick="search">
				<template #right>
					<view class="t_search_btn" @click="search('')">搜索</view>
				</template>
			</uni-easyinput>
			<uni-icons type="list" color="#454545" size="26" @click="$navTo('/pages/category/category')"></uni-icons>
		</view>
		<view class="search_content">
			<view class="history" v-if="!isShow">
				<view class="h_top" v-if="historyList.length>0">
					<view>历史搜索</view>
					<uni-icons type="trash" color="#9c9c9c" size="18" @click="clearHistory"></uni-icons>
				</view>
				<view class="h_list" v-if="historyList.length>0">
					<view class="h_item" v-for="item in historyList" @click="search(item.content)">{{item.content}}</view>
				</view>
				<view class="h_top" v-if="hotList.length>0">
					<view>热门搜索</view>
				</view>
				<view class="h_list h_huo" v-if="hotList.length>0">
					<view class="h_item" v-for="item in hotList" @click="search(item.name)"><image src="/static/huo.png" mode="widthFix"></image>{{item.name}}</view>
				</view>
				<!-- <view class="billboard">
					<swiperhalf></swiperhalf>
				</view> -->
			</view>
			<scroll-view class="type" scroll-with-animation scroll-x="true" v-if="isShow" :scroll-left="scrollLeft">
				<view class="t_item" :class="{'t_active':pcate==0}" @click="changebigCate(0,0)">全部</view>
				<view class="t_item" v-for="(item,index) in cateList" :class="{'t_active':pcate==item.id}"  @click="changebigCate(item.id,index+1)">{{item.name}}</view>
			</scroll-view>
			<view class="g_list" v-if="isShow">
				<liu-waterfall :bgColor="'#FBF8FE'" :dataList.sync="list" :column="2" @click="wateClick"></liu-waterfall>
				<view class="empty_loading">
					<image v-if="isloading" src="/static/business/loading.gif" ></image>
					<text v-if="isempty">没有更多了~</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperhalf from '@/components/swiperHalf.vue'
	export default {
		components: {
			swiperhalf
		},
		data() {
			return {
				isloading: false,
				isempty: false,
				keywords: '',
				page: 0,
				list: [],
				cateList: [],
				isShow: false,
				historyList: [],
				hotList: [],
				pcate: 0,
				scrollLeft: 0,
				contentScrollW: 0, // 导航区宽度
				curIndex: 0, // 当前选中
			};
		},
		onLoad(option){
			this.getHistory();
			this.getHot();
		},
		onReachBottom(){
			this.getList();
		},
		methods: {
			clear(){
				this.getHistory();
				this.page = 0;
				this.pcate = 0;
				this.page = 0;
				this.list = [];
				this.curIndex = 0;
				this.isShow = false;
			},
			search(v){
				if(v){
					this.keywords = v;
				}
				// if(this.keywords!=''){
				// 	let arr = [];
				// 	if(uni.getStorageSync('historyList')){
				// 		arr = uni.getStorageSync('historyList');
				// 	}
				// 	if(arr){
				// 		if(arr.indexOf(this.keywords)==-1){//如果不存在
				// 			arr.unshift(this.keywords);
				// 		}else{
				// 			//把已存在的，挪到最前面
				// 			arr = arr.filter(item => item != this.keywords);
				// 			arr.unshift(this.keywords);
				// 		}
				// 	}else{
				// 		arr.unshift(this.keywords);
				// 	}
				// 	if(arr.length>25){//最多保25条记录
				// 		arr.pop();
				// 	}
				// 	uni.setStorageSync('historyList',arr);
				// 	this.historyList = arr;
				// }
				// return;
				this.isShow = true;
				this.page = 0;
				this.pcate = 0;
				this.page = 0;
				this.list = [];
				this.curIndex = 0;
				this.scrollLeft = 0;
				this.getList();
				if(this.cateList.length==0){
					this.getCate();
				}
			},
			getCate(){
				this.$axios('Util/categorynew', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.cateList = res.data.data.category;
						setTimeout(()=>{
							// 获取标题区域宽度，和每个子元素节点的宽度
							this.getScrollW()
						},1000)
					}
				})
			},
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.type').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
					console.log(this.contentScrollW)
				}).exec();
				query.selectAll('.t_item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.cateList[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.cateList[i].width = data[i].width
					}
				}).exec()
			},
			// 一级分类点击
			changebigCate(id,index){
				if(this.pcate == id) return;
				this.pcate = id;
				this.page = 0;
				this.list = [];
				this.curIndex = index;
				this.scrollLeft = this.cateList[index].left - this.contentScrollW / 2 + this.cateList[index].width / 2;
				this.getList();
			},
			getList(){
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('Lists/index', 'POST', 'shop', {
					keywords: this.keywords,
					page: this.page,
					pcate: this.pcate,//一级分类
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data.goods;
						this.list = [...this.list, ...data];
						this.isempty = data.length <= 0;
					}
				})
			},
			wateClick(data) {
				this.$navTo('/pages/product/product?id='+data.id)
			},
			getHistory(){
				this.$axios('home/recently_query_goods', 'POST', 'shop').then(res => {
					if(res.data.code==200){
						this.historyList = res.data.data;
					}
				})
			},
			getHot(){
				this.$axios('home/hot_search', 'POST', 'shop').then(res => {
					if(res.data.code==200){
						this.hotList = res.data.data;
					}
				})
			},
			clearHistory(){
				this.$axios('home/recently_del', 'POST', 'shop').then(res => {
					if(res.data.code==200){
						this.historyList = [];
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f8f8fe;
}
.top_search{
	background: #f8f8fe;
	display: flex;
	align-items: center;
	padding: 0 20rpx 0;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;
	.uni-easyinput{
		background: #fff;
		border-radius: 70rpx;
		height: 80rpx;
		border: 2rpx solid $bg-color;
		padding: 0 20rpx 0 10rpx;
		margin-right: 30rpx;
		line-height: 1;
		overflow: hidden;
		.t_search_btn{
			display: flex;
			align-items: center;
			color: $bg-color;
			&:before{
				display: block;
				content: '';
				width: 2rpx;
				height: 42rpx;
				background: $bg-color;
				margin-right: 30rpx;
			}
		}
	}
	.uni-easyinput__content-input{
		line-height: 80rpx!important;
		height: 80rpx!important;
	}
	.tit{
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}
}
.search_content{
	padding: 80rpx 0;
}
.history{
	padding: 0 40rpx;
	.h_top{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
	}
	.h_list{
		margin-top: 20rpx;
		margin-right: -20rpx;
		.h_item{
			background: #e4e4e4;
			padding: 6rpx 16rpx;
			border-radius: 30rpx;
			margin-right: 18rpx;
			margin-bottom: 20rpx;
			display: inline-block;
			font-size: 24rpx;
			color: #9c9c9c;
		}
	}
	.h_huo{
		.h_item{
			background: #f0dbdb;
			color: #ef3535;
			image{
				width: 20rpx;
				margin-right: 10rpx;
				margin-top: 0;
				float: left;
			}
		}
	}
	.billboard{
		width: 100%;
		.swiper {
			height: 300rpx;
			width: 100%;
			.swiper-item {
				width: 80%;
				display: block;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				background: #8615E1;
			}
		}
	}
}
.type{
	position: fixed;
	top: 80rpx;
	width: 100%;
	left: 0;
	white-space: nowrap;
	padding: 30rpx 20rpx;
	color: #646464;
	background: #f8f8fe;
	z-index: 999;
	.t_item{
		display: inline-block;
		width: 170rpx;
		line-height: 52rpx;
		background: #F0E1FF;
		border-radius: 26rpx;
		color: #8615E1;
		margin-right: 10rpx;
		text-align: center;
		border: 2rpx solid #8615E1;
	}
	.t_active{
		color: #FFFFFF;
		background: #8615E1;
	}
}
.g_list{
	padding: 0 20rpx;
	padding-top: 96rpx;
}
</style>
